<!-- 
    钟房管理->开房入住 
    message {title:title,param:param}
    title 窗口标题
    param 窗口的默认参数
-->

<!-- 日期样式 -->
<link rel="stylesheet" href="./assets/css/datepicker.css" />
<link rel="stylesheet" href="./assets/css/bootstrap-timepicker.css" />
<link rel="stylesheet" href="./assets/css/daterangepicker.css" />
<link rel="stylesheet" href="./assets/css/bootstrap-datetimepicker.css" />
<div class="row">
    <div class="col-sm-12">
        <div class="widget-box transparent">
            <div class="widget-header">
                <h5 class="widget-title lighter" data-i18n="开房入住">
                    开房入住
                </h5>
                <div class="widget-toolbar no-border">
                    <label style="margin-top:-8px;">入住</label>
                    <label style="line-height: 24px;">
                        <input name="checkin" id="checkin" class="ace ace-switch ace-switch-5" type="checkbox" checked/>
                        <span class="lbl"></span>
                    </label>
                </div>
            </div>
            <div class="widget-body">
                <form id="room_detail" class="form-horizontal" action="return false;" onsubmit="return false;">
                    <div class="space-6"></div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" data-i18n="房号">
                            房号
                        </label>
                        <div class="col-sm-8">
                            <input id="room" name="room" class="input-sm" type="text" readonly />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" data-i18n="记账手牌">
                            记账手牌
                        </label>
                        <div class="col-sm-8">

                            <span class="input-icon input-icon-right">
                                <input class="input-sm filterForm" type="text" id="th" name="th" style="width:80px;"/>
                                <!-- <i id="help-th" class="ace-icon fa fa-caret-down bigger-150" style="cursor:pointer;"></i> -->
                            </span>
                            <div class="btn-group">
                                <button id="btnThSearch" data-i18n="查询" class="btn btn-sm btn-info" style="height:30px;margin-top: -5px;">
                                    查询
                                </button>
                            </div>
                            <span id="shoupaiInfo"></span>
                            <!-- <div class="input-group">
                                <input id="th" name="th" class="form-control search-query" type="text" />
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-info btn-sm" data-i18n="查询">
                                        <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                        查询
                                    </button>
                                </span>
                            </div> -->

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" data-i18n="过夜">
                            过夜
                        </label>
                        <div class="col-sm-8" style="height:28px;">
                            <label style="margin-top:5px;"><!--class="filterForm"-->
                                <input name="stayover" id="stayover" class="ace ace-switch ace-switch-5" type="checkbox">
                                <span class="lbl"></span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label" data-i18n="房价代码">
                            房价代码
                        </label>
                        <div class="col-sm-8">
                            <!-- <input id="" name="" class="input-sm" type="text" /> -->
                            <select id="rcode" name="rcode" class="filterForm" style="width:150px;">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>

                    <div id="">
                        <h4 class="header blue bolder smaller"></h4>
                        <div class="form-group stayover">
                            <label class="col-sm-4 control-label" data-i18n="姓名">
                                姓名
                            </label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <span class="input-icon input-icon-right">
                                        <input id="gname" name="gname" class="input-sm" type="text" placeholder="姓名"/>
                                    </span>
                                </div>
                            </div>
                        </div>
    
                        <div class="form-group stayover">
                            <label class="col-sm-4 control-label" data-i18n="身份证">
                                身份证
                            </label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <span class="input-icon input-icon-right">
                                        <input id="cardNo" name="cardNo" class="input-sm" type="text" placeholder="身份证"/>
                                    </span>
                                </div>
                            </div>
                        </div>
    
                        <div class="form-group stayover">
                            <label class="col-sm-4 control-label" data-i18n="人数">
                                人数
                            </label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <span class="input-icon input-icon-right">
                                        <input id="adults" name="adults" class="input-sm" type="text" placeholder="人数"/>
                                    </span>
                                </div>
                            </div>
                        </div>
    
                        <div class="form-group">
                            <label class="col-sm-4 control-label" data-i18n="开始时间">
                                开始时间
                            </label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <span class="input-icon input-icon-right">
                                        <input id="arr_d" name="arr_d" class="input-sm date-picker" type="text" />
                                        <i class="ace-icon fa fa-calendar"></i>
                                    </span>
                                    <input id="arr_t" name="arr_t" class="input-sm input-mask-time changetime" type="text" style="width: 80px;margin-left: 5px;" readonly/>
                                    <span id="arr_week" style="margin-left:5px;"></span>
                                </div>
                            </div>
                        </div>
                        <div class="form-group noStayover">
                            <label class="col-sm-4 control-label" data-i18n="时长">
                                时长
                            </label>
                            <div class="col-sm-8">
                                <input type="text" class="input-mini changetime" id="exp_dep_sc" name="exp_dep_sc" />
                            </div>
                        </div>
    
                        <div class="form-group stayover">
                            <label class="col-sm-4 control-label" data-i18n="间夜">
                                间夜
                            </label>
                            <div class="col-sm-8">
                                <input type="text" class="input-mini" id="nights" name="nights" />
                            </div>
                        </div>
    
                        <div class="form-group">
                            <label class="col-sm-4 control-label" data-i18n="结束时间">
                                结束时间
                            </label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <span class="input-icon input-icon-right">
                                        <input id="exp_dep_d" name="exp_dep_d" class="input-sm date-picker" type="text" />
                                        <i class="ace-icon fa fa-calendar"></i>
                                    </span>
                                    <input id="exp_dep_t" name="exp_dep_t" class="input-sm input-mask-time changetime" type="text" style="width: 80px;margin-left: 5px;" />
                                    <span id="exp_week" style="margin-left:5px;"></span>
                                </div>
                            </div>
                        </div>
                        <div class="profile-info-row col-sm-12">
                            <div class="col-sm-4 control-label">
                                <div class="profile-info-name pull-right" data-i18n="入账项目" style="border:0;">入账项目</div>
                            </div>
                            <div class="profile-info-value col-sm-8" style="margin-top:5px;border:0;">
                                <span id="xsxm_bh"></span>
                                <span id="xsxm_mc"></span>
                            </div>
                        </div>
                        <div class="profile-info-row col-sm-12">
                            <div class="col-sm-4">
                                <div class="profile-info-name pull-right" data-i18n="金额" style="border:0;">金额</div>
                            </div>
                            <div class="profile-info-value col-sm-8" style="margin-top:-3px;border:0;">
                                <span id="xsxm_je"></span>
                            </div>
                        </div>
                        <div class="profile-info-row col-sm-12">
                            <div class="col-sm-4" data-i18n="计时项目">
                                <div class="profile-info-name pull-right" data-i18n="计时项目" style="border:0;">计时项目</div>
                            </div>
                            <div class="profile-info-value col-sm-8" style="margin-top:-3px;border:0;">
                                <span id="js_bh"></span>
                                <span id="js_mc"></span>
                            </div>
                        </div>
                        <div class="profile-info-row col-sm-12">
                            <div class="col-sm-4">
                                <div class="profile-info-name pull-right" data-i18n="计时说明" style="border:0;">计时说明</div>
                            </div>
                            <div class="profile-info-value col-sm-8" style="margin-top:-3px;border:0;">
                                <span id="orderno"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label" data-i18n="备注">
                                备注
                            </label>
                            <div class="col-sm-8">
                                <textarea id="" name="" rows="5" cols="50"></textarea>
                            </div>
                        </div>
                    </div>
                    <h4 class="header blue bolder smaller"></h4>
                </form>
                <div style="display: flex;justify-content:center;">
                    <div calss="btn-group" style="margin:5px;">
                        <button id="btnCheck" class="btn btn-sm btn-info" data-i18n="确定">
                            <i class="ace-icon fa fa-check"></i>
                            确定
                        </button>
                    </div>
                    <div calss="btn-group" style="margin:5px;">
                        <button id="btnCancel" class="btn btn-sm btn-default" data-i18n="取消">
                            <i class="ace-icon fa fa-times"></i>
                            取消
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript"> 
    var scripts =   [
        "./assets/js/date-time/bootstrap-timepicker.js",
        "./assets/js/date-time/bootstrap-datepicker.js",
        "./assets/js/date-time/bootstrap-datetimepicker.js",
        "./js/plugin/bootstrap-datepicker.zh-CN.js",
        "./assets/js/date-time/daterangepicker.js",
    ];
    var insarg_json = {};
    $(".page-content-area").ace_ajax("loadScripts", scripts,$.HSAPI_GETPAGEPARAMS(function(message) {
        
        document.title = message.title;
        insarg_json=message.param;
        console.log(JSON.stringify(insarg_json));

        //计算窗口尺寸
        setSize();
        
        //初始页面参数
        jf_initValue();

        //初始插件
        jf_initPlugin();

        //绑定按钮事件
        jf_bindEvent();

       //绑定快捷键
       $.HSAPI_SETSHORTCUTKEY((e)=>{
            // alert(e.keyCode);
       });
    }));

    function setSize(){
        var wh = $(window).height();
        var top = $("body").offset().top;
        var h = wh - top;
        $("body").css({"overflow-y":"auto","height":h});
        $(".stayover").hide();  
        // $.HSAPI_SETMODALSIZE(1000,null);
    }

    function jf_bindEvent(){
        //确定
        $("#btnCheck").click(function(){
            // alert("确定")
            saveOper();
        })

        //取消
        $("#btnCancel").click(function(){
            //回调父页面
            $.HSAPI_CALLBACK_MODAL('我传递给父页面的值');
            $.HSAPI_CLOSEMODAL();
        })

        //台号查询
        $("#th").keydown(function(e){
            if(e.keyCode==13){
                // jf_walkInDefault()
                searchShouPai();
            }
        })

        //过滤条件改变事件
        $(".filterForm").change(function(){
            jf_walkInDefault();
        })

        //时长修改事件
        $(".changetime").change(function(){
            var name = this.name;
            var value = $(this).val();
            changeTime(name,value);
        })

        //台号查询
        $("#btnThSearch").click(function(){
            if($("#th").val()){
                searchShouPai();
            }
        })

        //是否过夜
        $("#stayover").change(function(){
            $(".stayover").toggle();
            $(".noStayover").toggle();
            if($(this).is(":checked")){
                jf_initDate();
                $(".date-picker").removeAttr("readonly");
            }else{
                $(".date-picker").attr("readonly","readonly");
                $(".date-picker").datepicker("remove");
            }
        })
    }
    
    //初始插件
    function jf_initPlugin(){
        //时间格式
        if(!$.isFunction($().mask)){
            $.ajaxSetup({async: false,cache: false });
            $.getScript("./assets/js/jquery.maskedinput.js");
            $.ajaxSetup({async:true});
        }
        $(".input-mask-time").mask('99:99');

        if(!$.isFunction($().spinbox)){
            $.ajaxSetup({async: false,cache: false });
            $.getScript("./assets/js/fuelux/fuelux.spinner.js");
            $.getScript("./assets/js/ace/elements.spinner.js");
            $.ajaxSetup({async:true});
        }
        $("#exp_dep_sc,#nights").ace_spinner({
            value :0,
            min:0,
            max:999,
            step:1, 
            on_sides: true, 
            icon_up:'ace-icon fa fa-plus smaller-75', 
            icon_down:'ace-icon fa fa-minus smaller-75', 
            btn_up_class:'btn-success' , 
            btn_down_class:'btn-danger',
        }).closest('.ace-spinner')
        .on('changed.fu.spinbox', function(){
            var name = "exp_dep_sc";
            var value = $("#exp_dep_sc").val();
            changeTime(name,value);
        });
    }

    //初始日期
    function jf_initDate(){
        $('.date-picker').datepicker({			
            autoclose : true,
            language : 'zh-CN',
            format : 'yyyymmdd',
            todayHighlight: true,
            todayBtn:'linked',
            clearBtn: true,
        });
    }

    function jf_initValue(){
        $("#room").val(insarg_json.room);
    }

    function jf_walkInDefault(){
        var stayover = $("#stayover").is(":checked")?"yes":"no";
        insarg_json.rcode = $("#rcode").val();
        insarg_json.room = $("#room").val();
        insarg_json.th = $("#th").val();
        var arg = {"arg":{"stayover":stayover,"th":$("#th").val(),"room":$("#room").val(),"rcode":$("#rcode").val()},
                    "ct_brzd":{"no":""},
                    "spa_room_detail":{"":""},
                    "ct_brxsxm":{"bh":""}};
        $.HSAPI_CALLPROCEDURE2(arg,"SPAROOMUsedWalkInDefault",{},function(data){
            if(data.RETURN==1){
                //初始房间代码
                jf_initRcode(data.spa_room_rate);
                insarg_json.spa_room_rate = data.spa_room_rate;
                //初始房间明细
                jf_initRoomDetail(data.spa_room_detail[0]);
                insarg_json.spa_room_detail = data.spa_room_detail[0];
                //初始入账项目
                jf_initBrxsxm(data.ct_brxsxm);
                insarg_json.ct_brxsxm = data.ct_brxsxm;
                //初始计时项目
                jf_initBrjsxm(data.ct_brjsxm);
                insarg_json.ct_brjsxm = data.ct_brjsxm;
            }else{
                jf_alert(data.MSG)
            }
        },function(data){
            jf_alert(JSON.stringify(data))
        });
    }

    //初始房间代码
    function jf_initRcode(ds){
        var option = '<option value=""></option>';
        $(ds).each(function(k,v){
            var selected = "";
            if(insarg_json.rcode==v.rcode){
                selected = "selected";
            }
            option += '<option value="'+v.rcode+'" '+selected+'>'+v.text+'</option>';
        })
        $("#rcode").html(option);
    }

    //初始房间明细
    function jf_initRoomDetail(ds){
        var arr_t = ds.arr_t.replace(":");
        var exp_dep_t = ds.exp_dep_t.replace(":");
        if(arr_t>exp_dep_t){
            ds.exp_dep_t = ds.arr_t
        }
        if($("#stayover").is(":checked")){
            $(".date-picker").removeAttr("readonly");
            jf_initDate();
            var arr_d = ds.arr_d.substr(0,4) + "-" + ds.arr_d.substr(4,2) + "-" + ds.arr_d.substr(6,2);
            var exp_dep_d = ds.exp_dep_d.substr(0,4) + "-" + ds.exp_dep_d.substr(4,2) + "-" + ds.exp_dep_d.substr(6,2);
            $("#arr_d").datepicker("setDate",new Date(arr_d))
            $("#exp_dep_d").datepicker("setDate",new Date(exp_dep_d));
        }else{
            $(".date-picker").attr("readonly","readonly");
            $(".date-picker").datepicker("remove");
            $("#arr_d").val(ds.arr_d);
            $("#exp_dep_d").val(ds.exp_dep_d);
        }
        $("#arr_t").val(ds.arr_t);
        $("#arr_week").text('星期'+getWeekValue(ds.arr_d));
        $("#exp_dep_t").val(ds.exp_dep_t);
        $("#exp_week").text('星期'+getWeekValue(ds.exp_dep_d));
    }

    //初始入账项目
    function jf_initBrxsxm(ds){
        $("#xsxm_bh").text(ds[0].bh)
        $("#xsxm_mc").text(ds[0].mc)
        $("#xsxm_je").text(ds[0].je)
    }

    //初始计时项目
    function jf_initBrjsxm(ds){
        $("#js_bh").text(ds[0].bh)
        $("#js_mc").text(ds[0].mc)
    }

    function saveOper(){
        insarg_json.spa_room_detail.arr_d = $("#arr_d").val()
        insarg_json.spa_room_detail.exp_dep_d = $("#exp_dep_d").val()
        insarg_json.spa_room_detail.arr_t = $("#arr_t").val()
        insarg_json.spa_room_detail.exp_dep_t = $("#exp_dep_t").val()
        insarg_json.spa_room_detail.exp_dep_sc = $("#exp_dep_sc").val()

        var stayover = $("#stayover").is(":checked")?"yes":"no";
        var arg1 = { arg:{"stayover":stayover,"th":$("#th").val(),"room":$("#room").val(),"rcode":$("#rcode").val()},
                    spa_room_detail : insarg_json.spa_room_detail,
                    ct_brxsxm : insarg_json.ct_brxsxm,
                    ct_brjsxm : insarg_json.ct_brjsxm[0]
                    };
        var procedure = "SPAROOMUsedWalkIn";
        if($("#checkin").is(":checked")){
            procedure = "SPAROOMUsedWalkIn";
        }else{
            procedure = "";
        }
        var arg2 = {};
        $.HSAPI_CALLPROCEDURE2(arg1,procedure,arg2,function(data){
            if(data.RETURN==1){

            }else{
                jf_alert(data.MSG)
            }
        },function(data){
            jf_alert(JSON.stringify(data))
        })
    }

    //时间变更
    function changeTime(name,value){
        var arr_t = $("#arr_t").val();
        var exp_dep_sc = $("#exp_dep_sc").val();
        var exp_dep_t  = $("#exp_dep_t").val();
        if(name=="arr_t"){
            if(arr_t>"24:00"){
                $("#arr_t").val("24:00");
                $("#exp_dep_t").val("24:00");
                $("#exp_dep_sc").val("0");
            }else if(arr_t>exp_dep_t){
                $("#exp_dep_t").val(value);
                $("#exp_dep_sc").val("0");
            }else{
                var sc = parseInt(exp_dep_t.substr(0,2)) - parseInt(value.substr(0,2))
                $("#exp_dep_sc").val(sc);
                $("#exp_dep_t").val(exp_dep_t.substr(0,2)+value.substr(2,3));
            }
        }else if(name=="exp_dep_sc"){
            var hour = parseInt(arr_t.substr(0,2)) + parseInt(value);
            if(hour>=24){
                if(arr_t.substr(3,2)=="00"){
                    $("#exp_dep_t").val("24:00");
                    $("#exp_dep_sc").val(24 - parseInt(arr_t.substr(0,2))); 
                }else{
                    $("#exp_dep_t").val(hour.toString()+arr_t.substr(2,3));
                    $("#exp_dep_sc").val(23 - parseInt(arr_t.substr(0,2))); 
                }
            }else{
                $("#exp_dep_t").val(hour.toString()+arr_t.substr(2,3));
            }
        }else if(name=="exp_dep_t"){
            hour = parseInt(value.substr(0,2))            
            if(hour>=24){
                if(arr_t.substr(3,2)=="00"){
                    $("#exp_dep_t").val("24:00");
                    $("#exp_dep_sc").val(24 - parseInt(arr_t.substr(0,2))); 
                }else{
                    $("#exp_dep_t").val(hour.toString()+arr_t.substr(2,3));
                    $("#exp_dep_sc").val(23 - parseInt(arr_t.substr(0,2))); 
                }
            }else{
                $("#exp_dep_sc").val(hour-parseInt(arr_t.substr(0,2))); 
                $("#exp_dep_t").val(hour.toString()+arr_t.substr(2,3));
            }
        }
    }

    //查询手牌
    function searchShouPai(){
        var arg1 = {"arg":{"th":$("#th").val()}};
        var procedure = "SPAOrderSubLedger";
        var arg2 = {};
        $.HSAPI_CALLPROCEDURE2(arg1,procedure,arg2,function(data){
            if(data.RETURN==1){
                var brzd = data.ct_brzd[0];
                var html =  '<label>接待号：</label><span>'+brzd.jdh+'</span>'+
                            '<label style="margin-left:10px;">NO：</label><span>'+brzd.no+'</span>'+
                            '<label style="margin-left:10px;">状态：</label><span>'+brzd.synstatus+'</span>';
                $("#shoupaiInfo").html(html);
                jf_walkInDefault();
            }else{
                $("#th").val("");
                $("#shoupaiInfo").html("");
                if(data.gritter){
                    if(data.hasOwnProperty("gritterstyle"))
							jf_successDelayed(data.gritter,2000,data.gritterstyle);
						else
							jf_successDelayed(data.gritter,2000); 
                }else{
                    jf_alert(data.MSG)
                }
            }
        },function(data){
            $("#th").val("");
            $("#shoupaiInfo").html("");
            jf_alert(JSON.stringify(data))
        })
    }
</script>
